<template>
    <div class="an-user">

      <x-header class="head-top" :left-options="{showBack: false}">
        <div slot="right" @click="onSys">
          <x-icon type="ios-gear-outline" size="27" class="icon-white"></x-icon>
        </div>
      </x-header>

      <div class="pag-head">
          <div class="user-info">
            <div class="pic"><img :src="userImg" /></div>
            <div class="txt">
              <h4>{{til}}</h4>
              <span @click="onClick">门店管理 ></span>
            </div>
          </div>
      </div>

      <div class="an-box" >
        <card class="an-car">
          <div slot="content" class="card-padding txt1">
            <div >
              <h4 class="color-org">0.19</h4>
              <p>余额(元)</p>
            </div>
            <div>
              <h4>0.00</h4>
              <p>欠款(元)</p>
            </div>
            <div>
              <h4>0</h4>
              <p>优惠券</p>
            </div>
          </div>
        </card>

        <card class="order-car">
          <div slot="header">
            <group>
              <cell title="我的订单" :link="{ path:'/myOrder',query: { tabId: 0 }}"></cell>
            </group>
          </div>
          <div slot="content">
            <grid :show-lr-borders="false" :show-vertical-dividers="false">
              <grid-item :link="{ path:'/myOrder',query: { tabId: 1 }}">
                <div slot="icon">
                  <x-icon type="card" size="30" class="ico-gree"></x-icon>
                </div>
                <span slot="label">待付款</span>
              </grid-item>
              <grid-item :link="{ path:'/myOrder',query: { tabId: 2 }}">
                <div slot="icon">
                  <x-icon type="film-marker" size="30" class="ico-gree"></x-icon>
                </div>
                <span slot="label">待发货</span>
              </grid-item>
              <grid-item :link="{ path:'/myOrder',query: { tabId: 3 }}">
                <div slot="icon">
                  <x-icon type="android-archive" size="30" class="ico-gree"></x-icon>
                </div>
                <span slot="label">待收货</span>
              </grid-item>
              <grid-item :link="{ path:'/myOrder',query: { tabId: 4 }}">
                <div slot="icon">
                  <x-icon type="filing" size="30" class="ico-gree"></x-icon>
                </div>
                <span slot="label">已收货</span>
              </grid-item>
            </grid>
          </div>
        </card>

      </div>



    </div>
</template>

<script>
  import { Group,Cell,Panel,Badge ,XHeader,Card,Grid, GridItem,   } from 'vux'
  import store from "@/store";
    export default {
      name: "user",
      components: {
        Group,
        Cell,
        Panel,
        Badge,
        XHeader,
        Card,
        Grid,
        GridItem,
      },
      data(){
        return{
          til:'鲁二哥',
          type: '1',
          userImg:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=676151664,1136836653&fm=27&gp=0.jpg',
          userName:store.state.user.token,
          userMsg:'账号：5788456985',
          money:'258.00',
          msg:'消息'
        }
      },
      computed:{

      },
      mounted:function () {

      },
      methods:{
        onSys () {
          this.$router.push({path:'/setting'});
        },
        onClick(){
          this.$router.push({path:'/userInfo'});
        },
      }
    }
</script>

<style lang="less" scoped>
  @import "../../styles/anstyle";
  .an-user{
    position: absolute;
    top:0;
    bottom: 51px;
    left: 0;
    right: 0;
    overflow: hidden;
    .head-top{
      background-color:@color-gre2 ;
    }
    .pag-head{
      padding: 0px 15px 40px 15px;
      color: #FFFFFF;
      background-color: @color-gre2;
      .user-info{
        width: 100%;
        .pic{
          display: inline-block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 8px;
          background-color: @color-gre3;
          img{
            max-width: 100%;
          }
        }
        .txt{
          vertical-align: top;
          display: inline-block;
          h4{
            padding: 5px 0 0 0 ;
            font-weight: bold;
          }
          span{
            font-size: 14px;
          }
        }
      }
    }
    .an-box{
      padding: 0 10px;
      margin-top: -20px;
      .an-car{
        border-radius: 8px;
        .card-padding{
          padding: 10px 0 ;
          display: flex;
          div{
            flex:1;
            text-align: center;
          }
          &.txt1{
            h4{
              font-size: 18px;
            }
            p{
              font-size: 14px;
              color: @color-text2;
            }
          }
        }
      }

    }


  }


</style>
<style lang="less">
  .an-user{
    .an-box{
      .order-car{
        .weui-cells{
          margin-top: 0;
          &:before{
            border-top: none;
          }
        }
        .weui-grids{
          &:before{
            border-top: none;
          }
          .weui-grid{
            &:after{
              border-bottom: none;
            }
          }
        }
      }
    }
  }
</style>
